{% extends "projects/project_edit_base.html" %}

{% load i18n %}
{% load static %}

{% block title %}{% trans "Traffic Analytics" %}{% endblock %}

{% block nav-dashboard %} class="active"{% endblock %}

{% block project-traffic-analytics-active %}active{% endblock %}
{% block project_edit_content_header %}{% trans "Traffic Analytics" %}{% endblock %}

{% block project_edit_content %}

  {% if not enabled %}
    {% block disabled %}
      {% include 'projects/includes/feature_disabled.html' %}
    {% endblock %}
  {% endif %}

  <h3>{% trans "Top viewed pages in the past 30 days" %}</h3>

    <div class="module-list">
      <div class="module-list-wrapper">
        <ul class="long-list-overflow">
          {% for row in top_pages_200 %}
            <li class="module-item">
              <a href="{{ row.url }}">{{ row.path }}</a>
              <span class="right quiet">{{ row.count }}</span>
            </li>
          {% empty %}
            <li class="module-item">
              <p class="quiet">
                {% trans 'No data available.' %}
              </p>
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>

  <br/>

  <h3>{% trans "Daily pageview totals" %}</h3>
  <canvas id="page-views-per-page" width="400" height="150"></canvas>

  <form method="get">
    <button type="submit" name="download" value="true" {% if not enabled %}disabled{% endif %}>{% trans "Download all data" %}</button>
  </form>

  {% if track_404 %}
  <h3>{% trans "Not Found (404) pages" %}</h3>

  <div class="module-list">
    <div class="module-list-wrapper">
      <ul class="long-list-overflow">
        {% for row in top_pages_404 %}
          <li class="module-item">
            <a href="{{ row.url }}">{{ row.path }}</a>
            <span class="right quiet">{{ row.count }}</span>
          </li>
          {# TODO: Add a `Create Redirect` button here with the URL pre-filled as the `from` URL #}
        {% empty %}
          <li class="module-item">
            <p class="quiet">
              {% trans "No data available." %}
            </p>
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>

  <small class="help_text">
    {% blocktrans %}
    * The way that we track 404 pages is on our backend hosting.
    It's possible the number of times each page is viewed is undercounted because of caching in the browser or in a CDN.
    {% endblocktrans %}
  </small>
  {% endif %}

{% endblock %}

{% block extra_scripts %}
  <!-- Chart.js v2.8.0 -->
  <script src="{% static 'vendor/chartjs/chartjs.bundle.min.js' %}"></script>
{% endblock %}

{% block extra_links %}
  <!-- Chart.js v2.8.0 -->
  <link rel="stylesheet" href="{% static 'vendor/chartjs/chartjs.min.css' %}">
{% endblock %}

{% block footerjs %}
<script>
  var line_chart = document.getElementById("page-views-per-page").getContext("2d");

  {# Using |safe here is ok since this is just integers and formatted dates #}
  var line_chart_labels = {{ page_data.labels|safe }};
  var line_chart_data = {{ page_data.int_data|safe }};

  var line_chart = new Chart(line_chart, {
    type: "line",
    data: {
      labels: line_chart_labels,
      datasets: [{
        label: "# of views",
        data: line_chart_data,
        fill: false,
        borderColor: "rgba(75, 192, 192, 1)",
        pointBorderColor: "rgba(75, 192, 192, 1)",
      }]
    },
  });
</script>
{% endblock %}
